<template>
	<div class="home-wrap">
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">

			<div v-if="showCashHint" class="cash-hint-box">
				<div class="cash-hint-content">
					<img class="cash-hint-bg" src="../../images/cashHint-bg.png" alt="" />
					<div class="cash-hint-text" :class="textClass"><span class="cash-hint-￥">￥</span>{{ newCash.amount }}
					</div>
					<img @click="showCashHint = false" class="cash-hint-btn" src="../../images/cashHint-btn.png"
						alt="" />
					<img @click="showCashHint = false" class="cash-hint-x" src="../../images/cashHint-x.png" alt="">
				</div>
			</div>

			<div class="line-grade-box">
				<!-- 搜索区/banner -->
				<div class="search-area-top">
					<div class="search-box">
						<div @click="handleToSearch" class="search-input">
							<img class="search-icon" :src="searchIcon" alt="">
							<div class="search-text">输入商品名称或类目</div>
							<div class="search-btn">搜索</div>
						</div>
						<img @click="handleToKefu" class="kefu-icon" :src="kefuIcon" alt="">
						<img @click="handleToNotice" class="help-icon" :src="helpIcon" alt="">
					</div>
				</div>

				<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="(item, index) in banners" :key="index" @click="handleToParams(item)">
						<div :style='"background: url(" + item.image_url + ") no-repeat center;"' class="search-area">

						</div>
					</van-swipe-item>
				</van-swipe>
				<!-- <div v-if="banners.length > 0" :style='"background: url(" + banners[0].image_url + ") no-repeat center;"'
				class="search-area">
				<div class="search-box">
					<div @click="handleToSearch" class="search-input">
						<img class="search-icon" :src="searchIcon" alt="">
						<div class="search-text">输入商品名称或类目</div>
						<div class="search-btn">搜索</div>
					</div>
					<img @click="handleToKefu" class="kefu-icon" :src="kefuIcon" alt="">
					<img @click="handleToNotice" class="help-icon" :src="helpIcon" alt="">
				</div>
			</div> -->





				<div class="line"></div>
				<!-- 类别标签 -->
				<div class="type-list">
					<!-- 推荐专区 shortcuts-->
					<template>
						<div v-for="(item) in shortcuts" :key="item.id" @click="handleToArea(item)"
							class="type-li active-btn">
							<img class="type-icon" :src="item.image_url" alt="">
							<div class="type-name">{{ item.name }}</div>
						</div>
					</template>
					<!-- 其他类目 -->
					<!-- <template v-else>
					<div v-for="(item) in typeList" :key="item.id" @click="handleToCate(item)"
						class="type-li active-btn">
						<img class="type-icon" :src="item.icon" alt="">
						<div class="type-name">{{ item.name }}</div>
					</div>
				</template> -->
				</div>


			</div>
			<!-- 推荐位 -->
			<div class="recommend-box">
				<div class="recommend_top">
					<div @click="handleToGold(item)" v-for="item, index in hybrid_bpyx" :key="index">
						<img :src="item.image_url" alt="">
					</div>
					<!-- <div>
					<img src="../../images/icon_st.png" alt="">
				</div> -->
				</div>
				<!-- 精酿 -->
				<div class="recommend_top" style="margin-bottom: 0;">
					<div :style="hybrid_jlpj.length == 1 ? 'margin-bottom:0' : 'margin-bottom: 0.24rem;'"
						@click="handleToNew(item)" v-for="item, index in hybrid_jlpj" :key="index">
						<img :src="item.image_url" alt="">
					</div>
				</div>

				<!-- 今日上新 -->
				<!-- <div class="recommend_bottom" v-for="item, index in hybrid_jrsx" :key="index" @click="handleToGold(item)">
				<img :src="item.image_url" alt="">
			</div> -->

				<!-- 红包专区 -->
				<div class="recommend_bottom" @click="handleToRedPacket()">
					<img src="../../images/home_mzlhb.png" alt="">
				</div>
			</div>
			<div class="main_box" v-if="goods_jrzt.length > 0">今日主推</div>
			<div class="row_box" v-if="goods_jrzt.length > 0 && goods_jrzt_style == 1">
				<div class="row_li" v-for="(item, index) in goods_jrzt" :key="index" @click="handleToItem(item.id)">
					<div class="row_img">
						<img :src="item.cover_url" alt="">
						<div v-if="item.xjq_deduction > 0" class="cash-tag">现金券抵¥{{ item.xjq_deduction }}</div>
					</div>
					<div class="row_title">{{ item.name }}</div>
					<div class="row_price">￥{{ item.price }}</div>
					<template v-if="item.labels.length">
						<div class="row_label" v-for="(items, index) in item.labels" :key="index">&nbsp;{{ items.name
						}}&nbsp;
						</div>
					</template>
				</div>
			</div>
			<template v-if="goods_jrzt.length > 0 && goods_jrzt_style == 0">
				<div v-for="(item, index) in goods_jrzt" :key="index" @click="handleToItem(item.id)">
					<div class="main_li">
						<div class="main_img">
							<img :src="item.cover_url" alt="">
						</div>
						<div class="main_title">{{ item.name }}</div>
						<div class="main_price">￥{{ item.price }}</div>
						<div class="main_label_cash">
							<template v-if="item.labels.length">
								<div class="main_label" v-for="(items, index) in item.labels" :key="index">{{ items.name
								}}
								</div>
							</template>
							<div v-if="item.xjq_deduction > 0" class="good-cash">
								<img src="../../images/cash_icon.png" alt="">
								<div>现金券抵¥{{ item.xjq_deduction }}</div>
							</div>
						</div>
					</div>
				</div>
			</template>

			<!-- <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white" :show-indicators="false">
			<van-swipe-item v-for="(item, index) in goods_jrzt" :key="index" @click="handleToItem(item.id)">
				<div class="main_li">
					<div class="main_img">
						<img :src="item.cover_url" alt="">
					</div>
					<div class="main_title">{{ item.name }}</div>
					<div class="main_price">￥{{ item.price }}</div>
					<template v-if="item.labels.length">
					<div class="main_label" v-for="items, indexs in item.labels" :key="indexs">{{ items.name
					}</div>
				</template>
					</div>
				</div>
			</van-swipe-item>
		</van-swipe> -->
			<!-- tab区  scrollspy sticky -->
			<van-tabs v-model="tabCurrent" @click="handleTabChange" title-active-color="#333333"
				title-inactive-color="#333333" background="transparent" sticky line-height="8px">
				<van-tab :disabled="item.jump_params == ''" v-for="(item, index) in tabList" :key="index"
					:title="item.name">
					<template #title>
						<div class="custom-tab-title">
							<img v-if="item.image_url" :src="item.image_url" alt="">
							<div>{{ item.name }}</div>
						</div>
					</template>
				</van-tab>
			</van-tabs>


			<!-- <div class="banner1" >
			<img :src="banner1" alt="" @click="goSelection">
		</div> -->
			<!-- <van-swipe class="my-swipe1 banner1" style="margin-top: 0.2rem;" :show-indicators="false" :autoplay="4000" indicator-color="white"
			v-if="tabCurrent === 0&& picture_hdzq2.length>0">
			<van-swipe-item v-for="(item, index) in picture_hdzq2" :key="index" @click="handleToParams(item)">
				<img :src="item.image_url" alt="">
			</van-swipe-item>
		</van-swipe> -->
			<!-- 花朵抵扣 -->
			<!-- <div class="zhuan_qu" v-if="tabCurrent === 0&& goods_syzq.length>0">
			<div class="private">
				<div class="gold-top">
					<img class="gold-recommend-icon-4" :src="recommendIcon4" alt="">
					<div @click="handleToSelection('goods_syzq')">查看更多<van-icon name="arrow" /></div>
				</div>
				<div class="banner2">
					<div class="private_item" v-for="(item, index) in goods_syzq" :key="index" @click="handleToItem(item.id)">
						<img :src="item.cover_url" alt="">
						<div>{{ item.name }}</div>
					</div>
				</div>
			</div>
		</div> -->
			<!-- 		
		<div class="zhuan_qu" v-if="tabCurrent === 0&& goods_jfzq.length>0">
			<div class="private">
				<div class="gold-top">
					<img class="gold-recommend-icon-5" :src="recommendIcon5" alt="">
					<div @click="handleToSelection('goods_jfzq')">查看更多<van-icon name="arrow" /></div>
				</div>
				<div class="banner2">
					<div class="private_item" v-for="(item, index) in goods_jfzq" :key="index" @click="handleToItem(item.id)">
						<img :src="item.cover_url" alt="">
						<div>{{ item.name }}</div>
					</div>
					<div class="private_item" v-if="goods_jfzq.length<3">
					</div>
				</div>
			</div>
		</div> -->
			<!-- <div class="line"></div>
		<van-swipe class="my-swipe1 banner1" :show-indicators="false" :autoplay="4000" indicator-color="white"
			v-if="tabCurrent === 0 ">
			<van-swipe-item v-for="(item, index) in picture_hdzq" :key="index" @click="handleToParams(item)">
				<img :src="item.image_url" alt="">
			</van-swipe-item>
		</van-swipe> -->

			<!-- 商品列表 -->
			<div v-if="tabList.length">
				<van-list v-model="loadingPage" :finished="finished" :immediate-check="false"
					:finished-text="list.length ? '没有更多了' : ''" @load="ajaxGoodList">

					<div v-if="finished && !list.length" class="empty-good">
						<van-empty description="暂无商品" />
					</div>

					<!-- 商品列表 -->
					<!-- 商品列表 -->
					<div class="good-ul">
						<goodItem v-for="(item, index) in list" :key="index" :item="item"></goodItem>
					</div>

				</van-list>
			</div>


			<!-- 归属地 -->
			<!-- <myLocation ref="myLocationRef" :adcode="adcode" :addressText="addressText" :latitude="latitude"
			:longitude="longitude">
		</myLocation> -->


			<footTab :current="0"></footTab>
		</van-pull-refresh>
	</div>
</template>

<script>
import footTab from '@/components/foot-tab';
import {
	homeTopBg, searchIcon, kefuIcon, helpIcon, banner,
	recommendIcon1, recommendIcon2, recommendIcon3, recommendIcon4, recommendIcon5, banner1
} from '@/tool/static-img';
import { HOME_DATA, TJZQ, CATE_LIST, GOOD_LIST, POPUP_WINDOW } from '@/api/home';
import { USERDETAIL } from '@/api/mine';
import goodItem from './components/good-item';
import myLocation from './components/my-location';
import { bannerToParams } from '@/tool/methods';
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
	components: {
		footTab,
		goodItem
	},
	data() {
		return {
			homeTopBg, searchIcon, kefuIcon, helpIcon, banner,
			recommendIcon1, recommendIcon2, recommendIcon3, banner1, recommendIcon4, recommendIcon5,
			autoplayTime: 7000,
			banners: [],
			tabList: [],
			goods_jrzt: [],
			goods_jrzt_style: 0,
			tabCurrent: 0,
			// 用户id
			uid: '',
			nickname: '',
			//爆品优选
			hybrid_bpyx: [],
			hybrid_jrsx: [],
			// 推荐专区
			shortcuts: [],
			goods_jptj: [],
			goods_jrsx: [],
			shop_jxhd: [],
			goods_syzq: [],
			goods_jptj_index: 0,
			picture_hdzq: [],
			goods_jfzq: [],
			picture_hdzq2: [],
			hybrid_jlpj: [],
			// 分类图片
			typeList: [],

			// 分页
			page: 1,
			pageSize: 20,
			list: [],
			loadingPage: false,
			finished: false,

			// 归属地
			adcode: '',
			addressText: '',
			latitude: '',
			longitude: '',

			// 下拉刷新状态
			refreshing: false,

			showCashHint: false,
			newCash: {},

		}
	},
	created() {
		// 首页数据
		// this.getHomeData()

		// 推荐专区
		// this.getRecommend();

		// 延迟2s继续
		setTimeout(() => {
			this.autoplayTime = 5000;
		}, 2000)
		localStorage.removeItem('content')
		// 所属区域
		// this.getMyArea();
		localStorage.removeItem('goodmsg')

	},
	activated() {
		document.title = '首页';
		// 只有在首次加载或者没有数据时才重新获取数据
		if (!this.banners.length || !this.list.length) {
			this.getHomeData()
		}
		// 重置加载状态但保留数据，避免下拉刷新时无法加载
		this.loadingPage = false;
		this.finished = false;
		this.getPopupWindow()
	},
	mounted() {
		// setTimeout(() => {
		// 	this.resetInit()
		// }, 1000)
	},
	computed: {
		textClass() {
			const length = String(this.newCash.amount).length;
			if (length === 1) return 'one-digit';
			if (length === 2) return 'two-digit';
			if (length >= 3) return 'three-digit';
			return '';
		}
	},
	methods: {
		// 是否登录
        isLogin() {
            const token = localStorage.getItem('token');
            if (!token) {
                this.$router.push({
                    name: 'login'
                })
                return false;
            }

            return true;
        },
		
		// 弹窗奖励
		getPopupWindow() {
			if (!this.isLogin()) {
				return
			}
			this.$http.get(POPUP_WINDOW).then(res => {
				if (res.code === 200 && res.data.length > 0) {
					this.newCash = res.data[0]
					this.showCashHint = true;
				}

			})
		},

		// 客服
		handleToKefu() {
			//h5的时候使用客服
			// 
			// console.log();
			let isWeChatBrowser = /MicroMessenger/i.test(navigator.userAgent)
			if (isWeChatBrowser) {
				window.location.href = 'https://work.weixin.qq.com/kfid/kfc73aae6b86b7c3ccd'
			} else {
				this.$toast('暂未开放，请到微信公众号联系客服')
			}
			//app的时候将上面注释显示下面的
			// 
			return
			const fromUrl = window.location.href;

			const clientId = this.uid;
			if (clientId && this.nickname) {
				// 用户
				const otherParams = JSON.stringify({
					"nickName": this.nickname
				})
				window.location.href = `https://webchat02.7moor.com/wapchat.html?accessId=62ea1e10-6fec-11ef-a989-e5cf0d8aa69c&clientId=${clientId}&otherParams=${otherParams}&fromUrl=${fromUrl}&urlTitle=h5&language=ZHCN`
			} else {
				// 游客
				window.location.href = `https://webchat02.7moor.com/wapchat.html?accessId=62ea1e10-6fec-11ef-a989-e5cf0d8aa69c&fromUrl=${fromUrl}&urlTitle=h5&language=ZHCN`
			}
		},
		// 所属区域
		getMyArea() {
			const token = localStorage.getItem('token');
			if (!token) {
				return
			}
			this.$http.get(USERDETAIL).then(res => {
				const {
					data
				} = res;

				this.uid = data.uid;
				this.nickname = data.nickname;

				if (data.location_status === 0) {
					// 未设置所属区域 - 去定位
					this.getLocation();
				}
			})
		},
		// 未设置所属区域 - 去定位
		getLocation() {
			var _this = this;

			window._AMapSecurityConfig = {
				securityJsCode: "638b1bb3fefe982cdf2a8db2cf2a7846",
			};

			// 加载高德地图的定位模块
			AMapLoader.load({
				key: 'ac8b3896464d5d2b7735e62100bee1d0', // 在此处替换为你的高德地图APIKey
				version: '2.0',
				plugins: ['AMap.Geolocation', 'AMap.Geocoder'] // 加载 Geolocation 插件
			}).then((AMap) => {
				const geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, // 是否使用高精度定位，默认:true
					useNative: true, // 是否使用安卓定位sdk用来进行定位，需要安卓端sdk配合
					timeout: 5000,
					needAddress: true
				});

				var geocoder = new AMap.Geocoder({
					// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
					city: '010'
				})

				geolocation.getCurrentPosition((status, result) => {
					console.log(result, '定位信息')

					if (status === 'complete') {
						_this.latitude = result.position.lat;
						_this.longitude = result.position.lng;

						// 如果获取到地址信息
						if (result.addressComponent && result.addressComponent.adcode) {
							const addressComponent = result.addressComponent;
							_this.adcode = addressComponent.adcode;
							_this.addressText = addressComponent.province + addressComponent.city + addressComponent.district;
							_this.$refs['myLocationRef'].show = true;
						} else {
							// 逆转码
							let lnglat = [_this.longitude, _this.latitude]
							geocoder.getAddress(lnglat, function (status, result) {
								console.log(result, '逆编码信息')
								if (status === 'complete' && result.info === 'OK') {
									const addressComponent = result.regeocode.addressComponent;
									_this.adcode = addressComponent.adcode;
									_this.addressText = addressComponent.province + addressComponent.city + addressComponent.district;
									_this.$refs['myLocationRef'].show = true;
								}
							})
						}

					} else {
						onError(result);
					}
				});
			}).catch((e) => {
				console.error('地图加载失败:', e);
			});
			// 定位出错的回调函数
			function onError(data) {
				_this.$toast('定位失败：请检查是否开通定位权限')
			}
		},
		// 首页数据
		getHomeData() {
			this.$http.get(HOME_DATA)
				.then(res => {
					const {
						data
					} = res;
					this.banners = data.banners;
					this.hybrid_bpyx = data.hybrid_bpyx;
					this.hybrid_jrsx = data.hybrid_jrsx
					this.tabList = data.navigations;
					this.goods_jrsx = data.goods_jxhw;
					this.shop_jxhd = data.goods_jptj;
					this.shortcuts = data.shortcuts;
					this.goods_jrzt = data.goods_jrzt
					this.hybrid_jlpj = data.hybrid_jlpj
					this.goods_jrzt_style = data.goods_jrzt_style;
					this.resetInit()
				})

		},
		// 私域甄选
		goSelection() {
			this.$router.push({
				name: 'selection',
			})
		},
		// 去商品
		handleToItem(id) {
			localStorage.setItem('goodmsg', 1)
			this.$router.push({
				name: 'good',
				query: {
					id: id
				}
			})

		},
		// 轮播跳转
		handleToParams(item) {
			bannerToParams(item)
		},
		// 分类
		handleToCate(item) {
			localStorage.removeItem('searchKey');
			this.$router.push({
				name: 'goodList',
				query: {
					cate_id: item.id
				}
			})
		},
		//私域
		handleToSelection(id) {

			this.$router.push({
				name: 'selection',
				query: {
					msg: id
				}
			})
		},
		// 推荐专区
		getRecommend() {
			this.$http.get(TJZQ)
				.then(res => {
					const {
						data
					} = res;


					this.shortcuts = data.shortcuts;
					this.goods_jptj_index = Math.ceil(data.goods_jptj.length / 2);
					this.goods_jptj = data.goods_jptj;
					this.goods_jrsx = data.goods_jxhw;
					this.shop_jxhd = data.shop_jxhd;
					this.goods_syzq = data.goods_syzq
					this.picture_hdzq = data.picture_hdzq
					this.picture_hdzq2 = data.picture_hdzq2
					this.goods_jfzq = data.goods_jfzq
				})
		},
		// 去红包专区
		handleToRedPacket() {
			this.$router.push({
				name: 'redPacket'
			})
		},
		// 去搜索页
		handleToSearch() {
			this.$router.push({
				name: 'search'
			})
		},
		// 去公告列表 
		handleToNotice() {
			this.$router.push({
				name: 'notice'
			})
		},
		// 类目切换
		handleTabChange(index) {
			// if(!this.tabList[index].jump_params){
			// 	this.tabCurrent=0
			// 	this.$toast('暂未开放')
			// 	return
			// }
			// 分页
			this.resetInit();


			if (!index) {
				return
			}

			let id = this.tabList[index].jump_params;

			if (!id) {
				this.typeList = [];
				return
			}

			return

			this.$http.get(CATE_LIST + id)
				.then(res => {
					const {
						data
					} = res;

					this.typeList = data;
				})
		},
		// 专区
		handleToArea(item) {
			if (item.name == '全部') {
				this.$router.push({
					name: 'lifeArea'
				})
			} else if (item.jump_type == 0) {
				this.$toast('暂未开放')
			} else {
				// jump_params
				bannerToParams(item)
				// this.$toast('暂未开放')
			}
		},
		// 金榜推荐
		handleToGold(item) {
			localStorage.setItem('shopName', item.name)
			if (localStorage.getItem('shopName') == '爆品优选') {
				this.$router.push({
					name: 'bestSelling',
					query: {
						jump_content: item.jump_content,
						type: Number(item.jump_params)
					}
				})
			} else {
				this.$router.push({
					name: 'newArea',
					query: {
						jump_content: item.jump_content,
						type: Number(item.jump_params)
					}
				})
			}


		},
		//精酿专区
		handleToNew(item) {
			localStorage.setItem('shopInfoName', item.name)
			this.$router.push({
				name: 'shopInfo',
				query: {
					type: Number(item.jump_params)
				}
			})
		},
		// 精选好店
		handleToShop() {
			// this.$router.push({
			// 	name: 'goldShop'
			// })
			localStorage.setItem('goodmsg', 1)
			this.$router.push({
				name: 'shopInfo',
				query: {
					// id: item.shop_id
				}
			})
		},
		resetInit() { //重置
			this.page = 1;
			this.loadingPage = true;
			this.list = [];
			this.finished = false;
			this.ajaxGoodList()
		},
		// 列表请求
		ajaxGoodList() {
			let params = {};
			params['page_num'] = this.page;
			params['page_size'] = this.pageSize;
			// console.log(this.tabList);
			if (this.tabList[this.tabCurrent]) {
				if (this.tabList[this.tabCurrent].jump_content == 'goods_list_flag') {
					params['flag'] = this.tabList[this.tabCurrent].jump_params;
				} else if (this.tabList[this.tabCurrent].jump_content == 'goods_list_mcate') {
					params['cate_id'] = this.tabList[this.tabCurrent].jump_params;
				}
			} else {
				this.finished = true;
				return
			}
			this.$http.post(GOOD_LIST, params)
				.then(res => {
					const { list } = res.data;

					if (list && list.length) {
						this.page++;
						this.list = this.list.concat(list);
						// 加载状态结束
						this.loadingPage = false;
						if (list.length < this.pageSize) {
							this.finished = true;
						}
					} else {
						this.finished = true;
					}
				})
		},
		// 下拉刷新处理函数
		onRefresh() {
			// 重新获取首页数据
			this.getHomeData();
			// 重置商品列表并重新加载
			this.resetInit();
			// 模拟网络延迟，1秒后结束刷新
			setTimeout(() => {
				this.refreshing = false;
			}, 1000);
		}

	}


}
</script>

<style lang="scss">
// .van-tab--active {
// 	font-size: .36rem !important;
// 	font-weight: bold !important;
// }

.home-wrap {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: calc(1rem + constant(safe-area-inset-bottom));
	padding-bottom: calc(1rem + env(safe-area-inset-bottom));
	box-sizing: border-box;

	.cash-hint-box {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);

		.cash-hint-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			top: 3.42rem;
			left: 50%;
			transform: translateX(-50%);
			margin: 0 auto;
			margin-top: 0.24rem;

			.cash-hint-bg {
				width: 6.6rem;
				height: 6.6rem;
			}

			.cash-hint-btn {
				position: absolute;
				top: 5.58rem;
				left: 2.23rem;
				width: 2.82rem;
				height: 0.82rem;
			}

			.cash-hint-x {
				position: absolute;
				top: 7rem;
				left: 3.4rem;
				width: 0.68rem;
				height: 0.68rem;
			}

			.cash-hint-text {
				position: absolute;
				top: 3.05rem;
				left: 2rem;
				font-weight: 600;
				font-size: 0.44rem;
				color: #FF2049;

				.cash-hint-￥ {
					font-size: 0.32rem;
				}
			}

			.cash-hint-text.one-digit {
				top: 2.9rem;
				left: 2rem;
				font-size: 0.64rem;
			}

			.cash-hint-text.two-digit {
				top: 2.9rem;
				left: 1.8rem;
				font-size: 0.64rem;
			}

			.cash-hint-text.three-digit {
				top: 3rem;
				left: 1.8rem;
				font-size: 0.44rem;
			}
		}

	}



	.line-grade-box {
		// padding-bottom: 1.72rem;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 82%, #F5F5F5 100%);
		position: relative;
	}

	.search-area {
		width: 100%;
		height: 6.46rem;
		padding-top: 0.24em;
		box-sizing: border-box;
		background-size: cover !important;


	}

	.search-area-top {
		width: 100%;
		background: transparent;
		position: absolute;
		z-index: 9;
		top: 0.24rem;

		.search-box {
			display: flex;
			align-items: center;
			width: 6.86rem;
			height: 0.72rem;
			margin: auto;

			.search-input {
				position: relative;
				display: flex;
				align-items: center;
				width: 6.34rem;
				height: 0.72rem;
				border-radius: 0.42rem;
				background-color: #ffffff;

				.search-icon {
					width: 0.32rem;
					height: 0.32rem;
					margin-left: 0.28rem;
					margin-right: 0.16rem;
				}

				.search-text {
					height: 0.4rem;
					line-height: 0.4rem;
					font-weight: 400;
					font-size: 0.28rem;
					color: #c3c3c3;
				}

				.search-btn {
					position: absolute;
					right: 0.06rem;
					top: 0;
					bottom: 0;
					margin: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 1.12rem;
					height: 0.6rem;
					margin-left: 0.88rem;
					font-weight: 400;
					font-size: 0.28rem;
					color: #ffffff;
					border-radius: 0.3rem;
					background: linear-gradient(90deg, #75BE70 0%, #56AE48 100%);
				}
			}

			.kefu-icon {
				width: 0.48rem;
				height: 0.48rem;
				margin-left: 0.32rem;
			}

			.help-icon {
				width: 0.48rem;
				height: 0.48rem;
				margin-left: 0.24rem;
			}
		}
	}


	.my-swipe {
		width: 100%;
		// height: 2.4rem;
		margin: 0 auto;
		// margin-top: -1.64rem;

		.banner-li {
			width: 100%;
			height: 100%;
			border-radius: 0.16rem;
			background-size: cover !important;
		}
	}

	.custom-tab-title {
		// font-size: .28rem;
		// height: 0.5rem;
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
		// flex-direction: column;
		align-items: center;
		margin: 0 auto;
		font-size: .3rem;

		img {
			width: .38rem;
			margin-right: .04rem;
			margin-top: -.1rem;
		}


	}

	.van-tab--active {
		.custom-tab-title {
			font-size: .36rem !important;
			font-weight: bold !important;

			div {
				// width: 44px;
				position: relative;
				// text-align: left;
			}

			div::after {
				content: '';
				position: absolute;
				bottom: -.08rem;
				left: 0;
				width: 33px;
				height: 8px;
				background: linear-gradient(90deg, #75CE67 0%, rgba(86, 174, 72, 0) 100%);
			}
		}

	}

	.active-title {
		color: #FF8911;
	}

	.van-tabs__line {
		// width: auto;
		// width: 44px;
		// height: 8px;
		width: 0;
		bottom: 0.17rem;
		background: linear-gradient(90deg, #75CE67 0%, rgba(86, 174, 72, 0) 100%);
		margin-bottom: .17rem;
		// left: 10px;
	}

	.van-tabs--line .van-tabs__wrap {
		height: 0.54rem;
	}

	.type-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 0.45rem;
		margin-top: .32rem;
		margin-bottom: .32rem;
		background: #fff;
		border-radius: .12rem;

		.type-li {
			margin-left: 0.4rem;
			margin-bottom: 0.16rem;

			&:nth-child(5n + 1) {
				margin-left: 0;
			}

			.type-icon {
				display: block;
				width: 1rem;
				height: 1rem;
			}

			.type-name {
				width: 1rem;
				height: 0.34rem;
				font-family: PingFangSC, PingFang SC;
				line-height: 0.34rem;
				font-weight: 400;
				font-size: 0.24rem;
				color: #333333;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
			}
		}
	}

	.gold-swipe {
		height: 2.88rem;
	}

	.recommend-box {
		// display: flex;
		// justify-content: space-between;
		width: 95%;
		margin: auto;

		// margin-top: -1.88rem;
		// display: flex;
		// justify-content: space-between;
		.recommend_top {

			margin-bottom: .2rem;

			div {
				width: 100%;
				margin-bottom: .24rem;

				// height
				img {
					width: 100%;
				}
			}
		}

		.recommend_bottom {
			width: 100%;
			margin-top: 0.1rem;
			// margin-top: -.12rem;

			img {
				width: 100%;
			}
		}

		.gold-recommend {
			width: 3.44rem;
			height: 3.44rem;
			background-color: #ffffff;
			border-radius: 0.16rem;
			overflow: hidden;

			.gold-bottom {
				position: relative;
				height: 2.88rem;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 3.02rem;
					height: 1px;
					background: #F2F4F5;
				}

				.gold-bottom-good {
					display: flex;
					align-items: center;
					height: 1.44rem;

					.good-main {
						width: 1.08rem;
						height: 1.08rem;
						margin-left: 0.2rem;
						border-radius: 0.16rem;
					}

					.good-desc {
						height: 1.08rem;
						margin-left: 0.12rem;
						font-family: PingFangSC, PingFang SC;

						.good-name {
							height: 0.34rem;
							width: 1.82rem;
							margin-top: 0.08rem;
							margin-bottom: 0.22rem;
							line-height: 0.34rem;
							font-weight: 400;
							font-size: 0.24rem;
							color: #333333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
						}

						.good-sale {
							height: 0.28rem;
							margin-left: 0.06rem;
							line-height: 0.28rem;
							font-size: 0.2rem;
							font-weight: 400;
							color: #FE7900;
						}
					}
				}
			}
		}

		.gold-top {
			display: flex;
			align-items: center;
			width: 100%;
			height: 0.56rem;
			border-radius: 0.16rem 0.16rem 0 0;
			background: linear-gradient(180deg, rgba(255, 237, 222, 0.71) 0%, #FFFFFF 100%);
		}

		.gold-recommend-icon-1 {
			width: .9rem;
			height: 0.24rem;
			margin-left: 0.28rem;
		}

		.gold-recommend-icon-2 {
			width: 1.64rem;
			// height: 0.24rem;
			margin-left: 0.28rem;
		}

		.gold-recommend-icon-3 {
			width: 1.1rem;
			margin-left: 0.28rem;
		}

		.today-swipe {
			height: 1.1rem;
		}

		.today-good {
			// margin-left: 0.14rem;
			display: flex;
			justify-content: space-between;

			.gold-shop {
				width: 48%;
				height: 1.66rem;
				margin-bottom: 0.12rem;
				border-radius: 0.16rem;
				background-color: #ffffff;

				.today-bottom-good {
					display: flex;
					height: 1.1rem;

					.today-main {
						width: 0.96rem;
						height: 0.96rem;
						margin-left: 0.2rem;
						border-radius: 0.16rem;
					}

					.today-desc {
						height: 0.96rem;
						margin-left: 0.1rem;

						.good-name {
							height: 0.34rem;
							width: 1.92rem;
							margin-top: 0.08rem;
							margin-bottom: 0.14rem;
							line-height: 0.34rem;
							font-weight: 400;
							font-size: 0.24rem;
							color: #333333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
						}

						.good-sale {
							height: 0.28rem;
							margin-left: 0.06rem;
							line-height: 0.28rem;
							font-size: 0.2rem;
							font-weight: 400;
							color: #FE7900;
						}
					}
				}

			}

			.gold-today {
				width: 48%;
				height: 1.66rem;
				border-radius: 0.16rem;
				background-color: #ffffff;

				.today-bottom-good {
					display: flex;
					height: 1.1rem;

					.today-main {
						width: 0.96rem;
						height: 0.96rem;
						margin-left: 0.2rem;
						border-radius: 0.16rem;
					}

					.today-desc {
						height: 0.96rem;
						margin-left: 0.1rem;

						.good-name {
							height: 0.34rem;
							width: 1.92rem;
							margin-top: 0.08rem;
							margin-bottom: 0.12rem;
							line-height: 0.34rem;
							font-weight: 400;
							font-size: 0.24rem;
							color: #333333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
						}

						.good-sale {
							height: 0.34rem;
							margin-left: 0.06rem;
							line-height: 0.34rem;
							font-size: 0.24rem;
							font-weight: 500;
							color: #F32A23;
						}
					}
				}

			}
		}
	}

	.good-ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: .1rem;
		padding: 0.14rem 0.24rem 0;
	}

	.empty-good {
		padding-top: 1rem;
	}

	.banner1 {
		width: 95%;
		margin: 0 auto;
		margin-top: 0.1rem;

		img {
			width: 100%;
		}
	}
}

.zhuan_qu {
	width: 95%;
	height: 3.6rem;
	margin: .2rem auto;
	border-radius: .16rem;
	background: #fff;

	.private {
		.gold-top {
			height: .64rem;
			background: linear-gradient(180deg, rgba(255, 233, 213, 0.71) 0%, #FFFFFF 100%);
			border-radius: .16rem .16rem 0px 0px;
			display: flex;
			justify-content: space-between;
			padding: .2rem;
			box-sizing: border-box;

			.gold-recommend-icon-4 {
				width: 2.08rem;
				// margin-top: .1rem;
				height: .3rem;
			}

			.gold-recommend-icon-5 {
				width: 1.78rem;
				// margin-top: .1rem;
				height: .3rem;
			}

			div {
				height: .7rem;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: .28rem;
				color: #666666;
				text-align: left;
				font-style: normal;
			}
		}

		.banner2 {
			width: 95%;
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			margin-top: .2rem;

			.private_item {
				width: 30% !important;

				// height: 0.8rem;
				img {
					display: block;
					width: 100%;
					height: 2rem;
					margin: 0 auto;
					border-radius: .1rem;
					margin-bottom: .2rem;
				}
			}

			div {
				width: 100%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: .24rem;
				color: #333333;
				line-height: .34rem;
				text-align: center;
				font-style: normal;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

		}
	}


}

::v-deep .van-tab--disabled {
	color: #999999 !important;
}

.main_box {
	width: 95%;
	margin: 0 auto;
	font-family: STYuanti-SC, STYuanti-SC;
	font-weight: bold;
	font-size: .36rem;
	margin-top: .12rem;
	color: #333333;
	position: relative;
	margin-bottom: .32rem;

}

.main_box::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1.42rem;
	height: .16rem;
	background: linear-gradient(90deg, #75CE67 0%, rgba(86, 174, 72, 0) 100%);
}

.main_li {
	width: 95%;
	// height: 5rem;
	// padding: .24rem;
	margin: 0 auto;
	background: #FFFFFF;
	border-radius: .16rem;
	padding-bottom: .18rem;
	// margin-top: .32rem;
	margin-bottom: .28rem;

	.main_img {
		background: url('../../images/icon_zt.png') no-repeat top;
		background-size: cover;
		display: flex;
		width: 100%;
		height: 4.44rem;
		justify-content: center;
		border-radius: .12rem;
		// padding-top: .54rem;
		padding-bottom: .12rem;

		// overflow: hidden;
		img {
			// display: inline-block;
			width: 100%;
			padding: 0 .12rem;
			padding-top: .54rem;
			// width: 95%;
			height: 100%;
			border-radius: .16rem;
			object-fit: cover;
			box-sizing: border-box;
		}
	}


	.main_title {
		padding: 0 .24rem;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: .28rem;
		color: #333333;
		margin-top: .24rem;
		margin-bottom: .08rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.main_price {
		padding: 0 .24rem;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: .32rem;
		color: #FD1A1A;
	}

	.main_label_cash {
		display: flex;
		align-items: center;
		margin-top: 0.08rem;

		.main_label {
			padding: 0 .12rem;
			margin-left: .24rem;
			display: inline-block;
			border-radius: .06rem;
			border: 1px solid #31A653;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: .22rem;
			color: #31A653;
		}

		.good-cash {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			font-size: 0.24rem;
			color: #F9301B;
			font-weight: 400;
			width: fit-content;
			height: 0.4rem;
			background-color: #ffedea;
			border-radius: 0.04rem;
			padding: 0 0.20rem 0 0.14rem;
			margin-left: 0.16rem;

			img {
				width: 0.28rem;
				height: 0.28rem;
				margin-right: 0.1rem;
			}
		}
	}
}

.row_box {
	display: flex;
	overflow-x: auto;
	white-space: nowrap;
	padding: 0 0.24rem;
	box-sizing: border-box;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	margin-bottom: .28rem;

	&::-webkit-scrollbar {
		display: none;
	}

	.row_li {
		display: flex;
		flex-direction: column;
		margin-right: 0.2rem;
		flex-shrink: 0;
		width: 2rem;

		.row_img {
			position: relative;
			width: 2rem;
			height: 2rem;

			img {
				width: 100%;
				height: 100%;
				border-radius: .12rem;
			}

			.cash-tag {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: .4rem;
				padding-left: 0.12rem;
				background-color: rgba(249, 48, 27, 0.68);
				border-radius: 0px 0px .12rem .12rem;
				font-weight: 400;
				font-size: .22rem;
				color: #FFFFFF;
				line-height: .32rem;
			}
		}

		.row_title {
			width: 100%;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 0.26rem;
			color: #333333;
			margin-top: 0.12rem;
			margin-bottom: 0.08rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.row_price {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 0.28rem;
			color: #FD1A1A;
		}

		.row_label {
			font-family: PingFangSC, PingFang SC;
			display: inline-block;
			width: fit-content;
			height: .36rem;
			padding: .04rem .16rem;
			line-height: .36rem;
			font-weight: 400;
			font-size: 0.22rem;
			color: #31A653;
			padding: 0 0.06rem;
			margin-top: 0.06rem;
			border-radius: 0.06rem;
			border: 1px solid #31A653;
		}
	}
}
</style>